<template>
	<div class="page">
		
		<head-back></head-back>
		
		 <div class="content">
			<form autocomplete="off">
				<div class="list-block list-margin content-martop10 content-boxshow ">
					<ul>
						<li>
							<div class="item-content content-padrights">
								<div class="item-inner border-bottom">
									<div class="item-title label color-333 font-14">项目</div>
									<div class="item-input">
										<input type="text" id="pjname" placeholder="请选择项目">
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="item-content content-padrights">
								<div class="item-inner border-bottom">
									<div class="item-title label color-333 font-14">主机</div>
									<div class="item-input">
										<input type="text" id="host" placeholder="要扫描的IP或域名">
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="item-content content-padrights" >
								<div class="item-inner ">
									<div class="item-title label color-333 font-14">备注</div>
									<div class="item-input">
										<input type="text" id="desc" placeholder="选填">
									</div>
								</div>
							</div>
						</li>

					</ul>
				</div>
				<div class="width100 text-center">
					选择任务类型
				</div>
				<div class="">
					<label class="label-checkbox item-content row no-gutter content-pad10l" v-for="mod in tasks">
						<span class="button button-big col-50 item-inner" v-for="(key,value) in mod">
							<input type="checkbox" name="mods" id="{{key}}">
							<div class="item-media">
								<i class="icon icon-form-checkbox"></i>
								{{value}}
							</div>
						</span>
	    			</label>
	    		</div>

	    		<footer class="bar bar-tab">
					<a id="tasknew" class="button button-big button-warning">新建任务</a>
				</footer>

			</form>
		</div>
	</div>
				
	<panel></panel>
		
</template> 

<script>
	import headBack from "../components/headBack.vue"
	import panel from "../components/panel.vue"
	import store from "../vuex/store.js"
	import getters from "../vuex/getters.js"
	import actions from "../vuex/actions.js"
	
	export default {
		name: "tasknew",
		data(){
			return {
				projects: [{'ALL':'公共项目'}],
				tasks: [{'portscan':'端口扫描'}]
			}
		},
		methods: {
			create(){
				var self = this;
				var name_exp = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;

				function checkName(){
					return true;
					var content = $('#host').val();
					if(content.length>30 || content.length<2){
						return $.toast('请填写项目名称，长度2-30位');
					}else if(!name_exp.test(content)){
						return $.toast('项目名由汉字、字母或数字组成');
					}else{
						return true;
					}
				};

				//$('#pjname').blur(checkName);

				var projects = [{'pjid':'ALL','pjname':'公共项目'}];
				var pjtitle = [];

				$(document).ready(function(){  
					self.ajax('./api/task','gettask',{},function(data){
						self.$set('tasks',data.tasks);
						for(var i in data.projects){
							projects.push(data.projects[i]);
						};
						for(var i in projects){
							pjtitle.push(projects[i].pjname);
						};
					});

				});
				$("#pjname").picker({
				  toolbarTemplate: '<header class="bar bar-nav">\
				  <button class="button button-link pull-right close-picker">确定</button>\
				  <h1 class="title">选择项目</h1>\
				  </header>',
				  cols: [{
				      textAlign: 'center',
				      values: pjtitle
				  }]
				});
				$('#tasknew').click(function(){
					if(checkName()){
						var pjid = projects[pjtitle.indexOf($('#pjname').val())].pjid;
						var host = $('#host').val();
						var desc = $('#desc').val();
						var mods = [];
						$('input[name="mods"]:checked').each(function(){
							mods.push($(this).attr("id"));
						});
						var param = {"pjid":pjid,"tkhost":host,"tkdesc":desc,"mods":mods};
						self.ajax('./api/task','create',param,function(data){
							$.toast('任务添加成功');
							//history.back();
						});
					}
				});
			}
		},
		components: {
			headBack,
			panel
		},
		store: store,
		vuex: {
			getters: {
				isLogin: getters.loginStatus
			},
			actions: {
				loginIn: actions.loginIn
			}
		},
		route: {
			data(){
			}
		},
		ready(){
			this.create()
		}
	}
</script>
